<template>
    <div class="hot">
        <h2><span class="i">TOP 10</span> 热门文章</h2>
        <ul>
            <li v-for="(list,index) in res" :key="list.id">
                <span :class="{ orange:index < 3 }">{{ index + 1 }}</span>
                <router-link to="">
                    {{ list.li }}
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
let resData=[
    {
        "id":"1",
        "li":"PHP学科：MySQL手册免费分享"
    },
    {
        "id":"2",
        "li":"这是第一篇文章"
    },
    {
        "id":"3",
        "li":"想少走弯路，就看看这个贴：PHPer职..."
    },
    {
        "id":"4",
        "li":"前端必学框家Bootstrap，3天带你从入..."
    },
    {
        "id":"5",
        "li":"PHP进阶：要想提高PHP的编程效率，..."
    },
    {
        "id":"6",
        "li":"最涨薪PHP项目-PHP微信公众平台开发"
    },
]

export default {
   data(){
       return{
           res:resData
       }
   }
}
</script>

<style scoped>
.hot{
    background: #fff;
}

.orange,.i{
    color: #ff6600;
    font-style: italic;
}

li span{
    padding-right: 10px;
}

ul{
    padding: 0;
    list-style: none;
    /* margin-top: -15px; */
}

a{
    text-decoration: none;
    color: #666666;
}

h2{
    font-weight: 700;
    font-size: 16px;
    height: 45px;
    line-height: 45px;
    outline:2px solid #eeeeee!important;
    background: #fbfbfb;
}

li{
    padding-bottom: 10px;
    font-size: 13px;
}

h2,ul{
    padding-left: 10px;
}
</style>